import Box from '@mui/material/Box';
import FormGroup from '@mui/material/FormGroup';
import TextField from '@mui/material/TextField';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import Button from '@mui/material/Button';
import Link from '@mui/material/Link';
// 消息提示
import Snackbar from '@mui/material/Snackbar';
import MuiAlert from '@mui/material/Alert';
import Slide from '@mui/material/Slide';

import React from 'react'
import './login.scss'
import { useState,useRef } from 'react';
import { useNavigate } from 'react-router-dom'

const Alert = React.forwardRef(function Alert(props, ref) {
    return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
})

const TransitionLeft = React.forwardRef(function Alert(props,ref) {
    return <Slide {...props}  ref={ref}  direction="left" />;
})

export default function App () {
    const [name,setName] = useState('') 
    const [pwd,setPwd] = useState('')
    const [checked, setChecked] = useState(false)
    const [open,setOpen] = useState(false)
    const [transition, setTransition] = useState(undefined)
    const nameInput = useRef(null)
    const pwdInput = useRef(null)
    const navigate = useNavigate();

      
    const changeName = (e) => {
        setName(e.target.value)
    }
    const changePwd = (e) => {
        setPwd(e.target.value)
    }
    const changeChecked = (e) => {
        setChecked(e.target.checked)
    }
    const handleSubmit = (Transition) => {
        if (nameInput.current.value !== '' && pwdInput.current.value !== '') {
                console.log(name, pwd)
                console.log(checked)
        } else {
                setTransition( () => Transition)
                setOpen(true);
        }
    }

    const handleClose = () => {
        setOpen(false);
    }
    return (
        <div className='warpper'>
            <Snackbar
                open={open}
                autoHideDuration={3000}
                anchorOrigin={{ vertical:'top', horizontal: 'center' }}
                onClose={handleClose}
                TransitionComponent= {transition}>
                    <Alert onClose={handleClose} severity="warning" sx={{ width: '100%' }}>
                        Please fill in required items !
                    </Alert>
            </Snackbar>
            <div className="container">
                <div className='title'> Sign in</div>
                <Box
                    sx={{
                        width: 600,
                        height: 500,
                        border: 1,
                        bgcolor:'#fff',
                        boxShadow: 2,
                        borderColor: 'primary.main',
                        borderRadius: '16px'
                    }}>
                        <div className='text-field'>
                            <TextField
                                className='text'
                                required
                                inputRef={nameInput}
                                id="outlined-required"
                                label="Username"
                                value={name}
                                onChange = { changeName }
                                />
                            <TextField
                                className='text'
                                required
                                inputRef={pwdInput}
                                id="outlined-password-input"
                                label="Password"
                                type="password"
                                autoComplete="current-password"
                                value={pwd}
                                onChange = { changePwd }
                                />
                            <div className='check'>
                                <FormGroup>
                                    <FormControlLabel control={<Checkbox checked= { checked } onChange={ changeChecked } />} label="Remermber me" />
                                </FormGroup>
                            </div>
                            <Button variant="contained" className='btn' onClick= { () => handleSubmit(TransitionLeft) }>SIGN IN</Button>
                            <div className='tip'>
                                <Link
                                    component="button"
                                    underline="hover"
                                    onClick={() => {
                                        navigate('/forget')
                                    }}>
                                    Forget Password ? 
                                </Link>
                                <Link
                                    component="button"
                                    underline="hover"
                                    onClick={() => {
                                        navigate('/register')
                                    }}>
                                    Don't have an account? Sign Up
                                </Link>
                            </div>
                            <div className='copy'>Copyright zhaofangnb@163.com 2022</div>
                        </div>
                </Box>
            </div>
        </div>
    )
}